<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{%static 'css/bootstrap.min.css'%}">
    <!--<script type="text/javascript" src="{%static 'js/jquery-1.9.1.min.js'%}"></script>-->
    <!--<script type="text/javascript" src="{%static 'js/vue.min.js'%}"></script>-->
    <script type="text/javascript" src="{%static 'js/home.js'%}"></script>
    <title>home Page</title>
</head>
<body>
<div id="allData" style="margin-left: 100px ;margin-right: 100px ;margin-top: 30px">
    <p><a href="{%url 'to_db_edit'">新建</a></p>
    <table class="table table-bordered">
        <thead>
        <tr>
            <td>id</td>
            <td>ip_address</td>
            <td>port</td>
            <td>dbName</td>
            <td>username</td>
            <td>password</td>
            <td>修改</td>
            <td>查看链接状态</td>
            <td>查看表</td>
            <td>弹窗</td>
        </tr>
        </thead>
        <tbody>
        {% for message in messages%}
        <tr>
            <td>{{ message.id }}</td>
            <td>{{ message.ip_address }}</td>
            <td>{{ message.port }}</td>
            <td>{{ message.db_name }}</td>
            <td>{{ message.username }}</td>
            <td>{{ message.password }}</td>
            <td><a href="{%url 'dbMessage' message.id%}">修改</a></td>
            <td><a href="{%url 'testConn' message.id%}">测试</a></td>
            <td><a href="{%url 'to_db_home' message.id%}">查看表</a></td>
            <td>
                <button onclick="openWin()">弹窗</button>
            </td>
        </tr>
        {%endfor%}
        </tbody>
    </table>
    <div align="center">
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>
</body>
</html>